<template>
  <div class="app-container">
    <div class="container">
      <!-- 基础信息 -->
      <div class="head-top">
        <div class="head-banner"></div>
        <div class="head-info">
          <div class="left">
            <div class="head-img">
              <div class="avatar">
                <img src="../../assets/logo.png" alt="" />
                <a href="" class="vip-icon"></a>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="head-name">
              <div class="name">qq_42792430</div>
              <div class="code-age">
                <span>码龄4年</span>
              </div>
            </div>
            <div class="head-desc">
              <ul>
                <li>
                  <div class="num">0</div>
                  <div class="name">被访问</div>
                  <div class="bar"></div>
                </li>
                <li>
                  <div class="num no-data">暂无</div>
                  <div class="name">原创</div>
                  <div class="bar"></div>
                </li>
                <li>
                  <div class="num no-data">暂无</div>
                  <div class="name">排名</div>
                  <div class="bar"></div>
                </li>
                <li>
                  <div class="num no-data">暂无</div>
                  <div class="name">排名</div>
                </li>
              </ul>
            </div>
            <div class="head-if">
              <div class="user-info">
                <p class="time">加入CSDN时间：2018-07-25</p>
                <p class="wrapper">
                  <span>博客简介：</span>
                  <span class="title line">qq_42792430的博客</span>
                </p>
              </div>
            </div>
          </div>
          <div class="btn">
            <a href="" class="black-btn">
              <i class="el-icon-edit"></i>编辑资料
            </a>
          </div>
        </div>
      </div>
      <!-- 主体 -->
      <div class="info-body">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="time-line">
              <div class="compont-title">
                <div class="top-title">
                  <h3>时间线</h3>
                </div>
              </div>
              <div class="line-content">
                <el-timeline :reverse="reverse">
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="activity.timestamp"
                  >
                    {{ activity.content }}
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="tabs">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="文章">
                  <el-empty description="暂无数据"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="资源">配置管理</el-tab-pane>
                <el-tab-pane label="收藏">角色管理</el-tab-pane>
                <el-tab-pane label="关注/订阅/互动">角色管理</el-tab-pane>
                <el-tab-pane label="问答">定时任务补偿</el-tab-pane>
                <el-tab-pane label="课程">定时任务补偿</el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <Foot></Foot>
  </div>
</template>

<script>
import Foot from '../../components/Foot.vue'
export default {
  components:{Foot},
  data() {
    return {
      reverse: true,
      activities: [
        {
          content: '活动按期开始',
          timestamp: '2018-04-15'
        },
        {
          content: '通过审核',
          timestamp: '2018-04-13'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #000;
  .head-top {
    background-image: url('../../assets/images/info-bg.gif');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 1920px 100px;
    .head-banner {
      margin: auto;
      height: 100px;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: cover;
    }
    .head-info {
      padding-left: 16px;
      padding-right: 24px;
      background: #fff;
      margin: 0 auto;
      border-radius: 2px;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      .left {
        display: flex;
        .head-img {
          position: relative;
          width: 102px;
          height: 90px;
          .avatar {
            position: absolute;
            top: -12px;
            width: 102px;
            height: 102px;
            border: 4px solid #f0f0f2;
            border-radius: 50%;
            background: #fff;
            img {
              width: 100%;
              height: 100%;
              display: block;
              border-radius: 50%;
            }
            .vip-icon {
              position: absolute;
              right: 0;
              bottom: -4px;
              width: 24px;
              height: 24px;
              display: block;
            }
          }
        }
      }
      .right {
        flex: 1;
        margin-left: 16px;
        .head-name {
          
          margin-top: 16px;
          color: #222226;
          font-weight: 500;
          line-height: 24px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          word-break: break-all;
          -webkit-box-align: start;
          -ms-flex-align: start;
          align-items: flex-start;
          .name{
          font-size: 22px;

          }
          .code-age {
            background-color: #c7e9fd;
            color: #1e68d8;
            height: 16px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            border-radius: 8px;
            margin-left: 4px;
            margin-top: 4px;
            -webkit-box-flex: inherit;
            -ms-flex: inherit;
            flex: inherit;
            span {
              padding: 0 6px 0 4px;
              font-size: 12px;
              display: block;
              height: 16px;
              line-height: 16px;
              text-align: center;
            }
          }
        }
        .head-desc {
          margin-top: 10px;
          ul {
            display: flex;
            li {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              position: relative;
              .num {
                color: #222226;
                font-weight: 600;
                font-size: 18px;
                line-height: 24px;
                margin-right: 4px;
              }
              .num.no-data {
                color: #555666;
                font-size: 14px;
                font-weight: 500;
                font-family: PingFangSC-Medium, PingFang SC;
              }
              .name {
                color: #555666;
                font-size: 14px;
                line-height: 16px;
                margin-top: 2px;
              }
              .bar {
                width: 1px;
                height: 16px;
                background: #e8e8ed;
                margin: 0 16px;
              }
            }
          }
        }
        .head-if {
          margin-bottom: 20px;
          margin-top: 20px;
          font-size: 13px;
          color: #555666;
          .time {
            margin-bottom: 10px;
          }
          .wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            margin-bottom: 10px;
            .title {
              width: 200px;
            }
          }
        }
      }
      .btn {
        -ms-flex-item-align: start;
        align-self: flex-start;
        margin-top: 30px;
        .black-btn {
          border: 1px solid #ccccd8;
          color: #555666;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          font-size: 14px;
          width: 96px;
          text-align: center;
          height: 32px;
          border-radius: 20px;
          margin-left: 16px;
        }
      }
    }
  }
  .info-body {
    margin-top: 15px;
    .tabs {
      background-color: #fff;
      padding: 10px;
      border-radius: 2px;
    }
  }
}
.time-line {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .line-content {
    padding: 24px;
  }
}
</style>
